<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/strophe.js/1.2.16/strophe.min.js"></script>
    <script src='demo1.js'></script>
    <style type="text/css">
        .msg-box {height: 600px; width: 400px; overflow: scroll; float:right; border:dashed 1px #000; margin-top: 0px;}
        .msg-box p, .msg-box body {width: 100%; height: auto; display: block;}
        .msg-box body {margin-top: -20px !important;}
        .left {
            width: 100%; height: auto;
            float:left;
            text-align: left;
            margin: auto !important;
        }
        .right {
            width: 100%; height: auto;
            float:left;
            text-align: right;
            margin: auto !important;
        }
    </style>
</head>
<body>
    <div style="width: 200px; height: auto; float: left;">

        JID: <input type="text" id="input-from-jid">
        <br>
        password<input type="password" id="input-pwd" value="abc123456">
        <br>
        <button id="btn-login">login</button>
        <button onclick="$('#msg').html('')">clear</button>
        <br>
        msg
        <br>
        <textarea id="input-msg" cols="30" rows="4"></textarea>
        <br>
        to jid <input type="text" id="input-to-jid">
        <button id="btn-send">send</button>
    </div>
    <div id="msg" class="msg-box"></div>
</body>
</html>
